<template>
  <div class="navs">
    <template v-for="(item, index) in navs">
      <div class="nav" :key="index">
        <img :src="require(`@/assets/imgs/${item.icon}`)" alt="" />
        <span>{{ item.title }}</span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navs: [
        { title: "美妆个护", icon: "1.png" },
        { title: "母婴用品", icon: "2.png" },
        { title: "潮流服饰", icon: "3.png" },
        { title: "跨境购", icon: "4.png" },
        { title: "手机数码", icon: "5.png" },
        { title: "居家日用", icon: "6.png" },
        { title: "玩具乐器", icon: "7.png" },
        { title: "更多", icon: "8.png" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.navs {
  width: 690px;
  height: 354px;
  background: #ffffff;
  border-radius: 10px;
  margin: auto;
  margin-top: 148px;
  display: flex;
  flex-wrap: wrap;

  .nav {
    width: 25%;
    height: 177px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    span {
      font-size: 24px;
      color: #999999;
      display: inline-block;
      margin-top: 19px;
    }
  }
}
</style>
